<template>
  <el-row :gutter="24">
    <el-col :span="8">
      <el-form-item label="系统类型" prop="deviceSystem">
        <el-select v-model="localAccessory.deviceSystem" @change="deviceSystemHandle" placeholder="请选择系统类型" required :disabled="disabled">
          <el-option v-for="item in deviceSystemList" :key="item.id" :value="item.id" :label="item.systemName"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="设备类型" prop="deviceType">
        <el-select v-model="localAccessory.deviceType" :disabled="!localAccessory.deviceSystem || disabled" placeholder="请选择设备类型" required>
          <el-option v-for="item in deviceTypeList" :key="item.id" :value="item.id" :label="item.typeName"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="厂家" prop="factory">
        <el-input v-model="localAccessory.factory" placeholder="请输入厂家名称" required :disabled="disabled" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="品牌" prop="brand">
        <el-input v-model="localAccessory.brand" placeholder="请输入品牌名称" required :disabled="disabled" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="型号" prop="model">
        <el-input v-model="localAccessory.model" placeholder="请输入型号" required :disabled="disabled" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="规格" prop="specifications">
        <el-input v-model="localAccessory.specifications" placeholder="请输入规格" required :disabled="disabled" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="备件数量" prop="count">
        <el-input-number v-model="localAccessory.number" :min="0" placeholder="请输入备件数量" required :disabled="disabled" style="width:100%;" />
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, reactive, ref, toRefs, onMounted } from 'vue';
import { listDeviceSystem } from '@/api/workorder/deviceSystem';
import { listDeviceType } from '@/api/workorder/deviceType';

interface Accessory {
  workorderId: string;  // 工单编号
  deviceSystem: string | null; // 设备系统
  deviceType: string | null; // 设备类型
  factory: string; // 厂家
  brand: string; // 品牌
  model: string; // 型号
  specifications: string; // 规格
  number: number; // 数量
}

export default defineComponent({
  props: {
    accessory: {
      type: Object as PropType<Accessory>,
      required: true,
    },
    disabled: {
      type: Boolean,
      required: false,
    }
  },
  setup(props) {
    const localAccessory = computed({
      get: () => props.accessory,
      set: (value) => {
        // 根据需要触发事件或其他操作
      }
    });

    const data = reactive({
      deviceSystemParams: {
        pageNum: 1,
        pageSize: 999,
        description: undefined,
        systemId: undefined
      },
    });

    const { deviceSystemParams } = toRefs(data);
    const deviceSystemList = ref<Array<{ id: string | number, systemName: string }>>([]);
    const deviceTypeList = ref<Array<{ id: string | number, typeName: string }>>([]);

    // 获取系统类型列表
    const getDeviceSystemList = async () => {
      try {
        const res = await listDeviceSystem(deviceSystemParams.value);
        deviceSystemList.value = res.rows;
      } catch (error) {
        console.error('获取系统类型列表失败', error);
      }
    };

    // 获取设备类型列表
    const getDeviceTypeList = async () => {
      if (!localAccessory.value.deviceSystem) return;
      deviceSystemParams.value.systemId = localAccessory.value.deviceSystem;
      try {
        const res = await listDeviceType(deviceSystemParams.value);
        deviceTypeList.value = res.rows;
        // localAccessory.value.deviceType = null; // 清空设备类型选择 todo  这里有问题我注释掉了，有问题再改
      } catch (error) {
        console.error('获取设备类型列表失败', error);
      }
    };

    const deviceSystemHandle = () => {
      getDeviceTypeList();
    };

    onMounted(() => {
      getDeviceSystemList();
      getDeviceTypeList();
    });

    return {
      localAccessory,
      deviceSystemList,
      deviceTypeList,
      deviceSystemHandle
    };
  }
});
</script>
